<template>
  <div class="succ-box">
      <div class="message-box backFF">提交成功
          <br>
          <span>感谢贵司使用链信金科融资服务平台，我司财务顾问将尽快与您联系，为贵司定制融资方案。</span>
      </div>
      <div class="info-box backFF mt10">
          <div class="info-div">
              <div>{{applySuccessData.enterpriseName}}</div>
              <div>申请融资额度：{{applySuccessData.amount}}</div>
              <div>申请时间：{{applySuccessData.applyTime}}</div>
          </div>
          <div>
              <button @click="$router.push('/bgDetails/' + applySuccessData.enterpriseId)">企业信息</button>
          </div>
      </div>
      <div class="contact-box backFF mt10"><span>您的联系方式：{{applySuccessData.contactName}} &nbsp;&nbsp;&nbsp; {{applySuccessData.contactPhone}}</span></div>
      <div class="mt10 padd-box">
          贵司选择的融资服务{{(applySuccessData.shortTermProducts ? applySuccessData.shortTermProducts.length : 0)+(applySuccessData.middleTermProducts ? applySuccessData.middleTermProducts.length : 0)+(applySuccessData.longTermProducts ? applySuccessData.longTermProducts.length : 0)}}个
      </div>
    <!-- 评估详细内容 -->
    <div class="details-list mt10" v-if="isProduct">
      <div class="tabList">
        <ul class="lists">
          <li
            ref="a"
            @click="details.shortTermProducts && details.shortTermProducts.length ? tabIndex = 0 : null"
            :class="{'active' : tabIndex == 0}"
          >短期({{details.shortTermProducts ? details.shortTermProducts.length : 0 }})</li>
          <li
            @click="details.middleTermProducts && details.middleTermProducts.length ? tabIndex = 1 : null"
            :class="{'active' : tabIndex == 1}"
          >中期({{details.middleTermProducts ? details.middleTermProducts.length : 0 }})</li>
          <li
            ref="abc"
            @click="details.longTermProducts && details.longTermProducts.length ? tabIndex = 2 : null"
            :class="{'active' : tabIndex == 2}"
          >长期({{details.longTermProducts ? details.longTermProducts.length : 0 }})</li>
        </ul>

        <ul class="list-content">
          <li v-if="tabIndex == 2 && details.longTermProducts && details.longTermProducts.length">
            <Swipe class="my-swipe" :loop="false"  :initial-swipe="0" :show-indicators="false">
              <SwipeItem v-for="(item, index) in details.longTermProducts" :key="index">
                <div class="list">
                  <h2>
                    <span>{{item.productName}}</span>
                    <span>{{item.type == 3 ? "长期" : item.type == 2 ? "中期" : "短期"}}</span>
                  </h2>
                  <div>{{item.productDescribe}}</div>
                  <div>申请额度：{{item.approvalAmountMin}}-{{item.approvalAmountMax}}万</div>
                  <div>贷款利息：年华{{item.loanInterestMin}}%-{{item.loanInterestMax}}%</div>
                  <div class="dkjg">
                    <span>贷款机构：{{item.lendingProviderName}}</span>
                    <span>
                      <span
                        style="font-size:18px; color:#2F54EB; font-weight:bold"
                      >{{item.loanPeriodMax}}</span>
                      <span>期</span>
                    </span>
                  </div>
                </div>
                <Steps direction="vertical" :active="-1" inactive-color="#2F54EB">
                  <Step>
                    <div>可申请产品数：{{item.singleProductMeetNum}}个</div>
                  </Step>
                  <Step>
                    <div>可申请总额度：{{item.approvalAmountMax}}万</div>
                  </Step>
                  <Step>
                    <div>还款方式：{{item.repaymentMethodStr}}</div>
                  </Step>
                  <Step>
                    <div>申请方式：{{item.applicationMethodStr}}</div>
                  </Step>
                  <Step>
                    <div>担保方式：{{item.guaranteeMethodStr}}</div>
                  </Step>
                  <Step>
                    <div class="lines">
                      选择该融资产品：
                      <van-switch @change="checkBtn(item.type,item.checked,item.pkId)" :size="18" v-model="item.checked" />
                    </div>
                  </Step>
                </Steps>
              </SwipeItem>
            </Swipe>
          </li>

          <li
            v-if="tabIndex == 1 && details.middleTermProducts && details.middleTermProducts.length"
          >
            <Swipe class="my-swipe" :loop="false" :initial-swipe="0" :show-indicators="false">
              <SwipeItem v-for="(item, index) in details.middleTermProducts" :key="index">
                <div class="list">
                  <h2>
                    <span>{{item.productName}}</span>
                    <span>{{item.type == 3 ? "长期" : item.type == 2 ? "中期" : "短期"}}</span>
                  </h2>
                  <div>{{item.productDescribe}}</div>
                  <div>申请额度：{{item.approvalAmountMin}}-{{item.approvalAmountMax}}万</div>
                  <div>贷款利息：年华{{item.loanInterestMin}}%-{{item.loanInterestMax}}%</div>
                  <div class="dkjg">
                    <span>贷款机构：{{item.lendingProviderName}}</span>
                    <span>
                      <span
                        style="font-size:18px; color:#2F54EB; font-weight:bold"
                      >{{item.loanPeriodMax}}</span>
                      <span>期</span>
                    </span>
                  </div>
                </div>
                <Steps direction="vertical" :active="-1" inactive-color="#2F54EB">
                  <Step>
                    <div>可申请产品数：{{item.singleProductMeetNum}}个</div>
                  </Step>
                  <Step>
                    <div>可申请总额度：{{item.approvalAmountMax}}万</div>
                  </Step>
                  <Step>
                    <div>还款方式：{{item.repaymentMethodStr}}</div>
                  </Step>
                  <Step>
                    <div>申请方式：{{item.applicationMethodStr}}</div>
                  </Step>
                  <Step>
                    <div>担保方式：{{item.guaranteeMethodStr}}</div>
                  </Step>
                  <Step>
                    <div class="lines">
                      选择该融资产品：
                      <van-switch @change="checkBtn(item.type,item.checked,item.pkId)" :size="18" v-model="item.checked" />
                    </div>
                  </Step>
                </Steps>
              </SwipeItem>
            </Swipe>
          </li>

          <li v-if="tabIndex == 0 && details.shortTermProducts && details.shortTermProducts.length">
            <Swipe class="my-swipe" :loop="false" :initial-swipe="0" :show-indicators="false">
              <SwipeItem v-for="(item, index) in details.shortTermProducts" :key="index">
                <div class="list">
                  <h2>
                    <span>{{item.productName}}</span>
                    <span>{{item.type == 3 ? "长期" : item.type == 2 ? "中期" : "短期"}}</span>
                  </h2>
                  <div>{{item.productDescribe}}</div>
                  <div>申请额度：{{item.approvalAmountMin}}-{{item.approvalAmountMax}}万</div>
                  <div>贷款利息：年华{{item.loanInterestMin}}%-{{item.loanInterestMax}}%</div>
                  <div class="dkjg">
                    <span>贷款机构：{{item.lendingProviderName}}</span>
                    <span>
                      <span
                        style="font-size:18px; color:#2F54EB; font-weight:bold"
                      >{{item.loanPeriodMax}}</span>
                      <span>期</span>
                    </span>
                  </div>
                </div>
                <Steps direction="vertical" :active="-1" inactive-color="#2F54EB">
                  <Step>
                    <div>可申请产品数：{{item.singleProductMeetNum}}个</div>
                  </Step>
                  <Step>
                    <div>可申请总额度：{{item.approvalAmountMax}}万</div>
                  </Step>
                  <Step>
                    <div>还款方式：{{item.repaymentMethodStr}}</div>
                  </Step>
                  <Step>
                    <div>申请方式：{{item.applicationMethodStr}}</div>
                  </Step>
                  <Step>
                    <div>担保方式：{{item.guaranteeMethodStr}}</div>
                  </Step>
                  <Step>
                    <div class="lines">
                      选择该融资产品：
                      <van-switch @change="checkBtn(item.type,item.checked,item.pkId)" v-model="item.checked" :size="18" />
                    </div>
                  </Step>
                </Steps>
              </SwipeItem>
            </Swipe>
          </li>
        </ul>
      </div>
    </div>
    
    <p class="info" v-else>很遗憾，当前暂无产品服务符合您的融资需求！</p>
    <div class="last-box"><button @click="$router.push('/myapply')">完成</button></div>
  </div>
</template>

<script>
import { applySuccess } from "api/AsessmentApply";
import {Swipe, SwipeItem, Step, Steps} from "vant";
export default {
    components:{
        Swipe,
        SwipeItem,
        Step,
        Steps,
    },
    data(){
        return{
            applySuccessData:{},
            details:{},
            isProduct:false,
            tabIndex: 0,
            swiperWidth: window.innerWidth - 70,
        }
    },
    mounted(){
        this.isProduct = true;
        console.log(this.$route.params)
        // this.$route.params
        // RZSQ2020080916575766734306
        applySuccess({code:this.$route.params.code}).then(res=>{
            console.log(res)
            if(res.code===0){
                this.applySuccessData = res.data
                this.details.longTermProducts = res.data.longTermProducts;
                this.details.shortTermProducts = res.data.shortTermProducts;
                this.details.middleTermProducts = res.data.middleTermProducts;
            }
        }).catch(err=>{

        })
    },
    methods:{

    }
}
</script>

<style lang="stylus" scoped>
@import './../../assets/styl/mixin.styl'
.succ-box
    background #F7F7F7
    overflow-y scroll
    .message-box
        padding rem(20) rem(15)
        font-size rem(16)
        span
            margin-top rem(10)
            display inline-block
    .backFF
        background #FFFFFF
    .mt10
        margin-top rem(10)
    .info-box
        display flex
        justify-content space-between
        align-items center
        font-size rem(13)
        color #666666
        padding rem(20) rem(15)
        
        .info-div
            display flex
            flex-direction column
            font-size rem(15)
            color #333333
            div
                margin-top rem(15)
            :first-child
                margin-top 0
                font-weight bold
        button
            font-size rem(15)
            color #2F54EB
            border-radius rem(11.5)
            border rem(0.5) solid #2F54EB
    .contact-box
        color #333333
        font-size rem(15)
        padding rem(20) rem(15)
    .padd-box
        padding rem(10) rem(15)
    .last-box
        color #FFFFFF
        font-size rem(16)
        background #2F54EB
        text-align center
        width rem(80)
        height rem(30)
        border-radius rem(4)
        display flex
        justify-content center
        align-items center
        margin 0 auto
        margin-bottom rem(20)
    .details-list
        padding-bottom rem(20)
        p
            padding rem(20) rem(15)
            background-color #F7F7F7
            font-size rem(12)
            color #666
            line-height rem(20)
        .tabList
            background-color #fff
            font-size rem($ft16)
        .lists
            display flex
            justify-content space-around
            align-items center
            li
                display block
                flex 1
                text-align center
                color #666
                font-weight bold
                margin-top rem(10)
            .active
                position relative
                color #2F54EB
            &::before
                position absolute
                bottom 0
                left 50%
                transform translateX(-50%)
                content ''
                width rem(30)
                height rem(2)
                background-color #2F54EB
        .list-content
            li
                background-color #fff
                border-top 0
                padding 0 rem(10)
                .list
                    height rem(144)
                    border-radius rem(6)
                    border-left rem(4) solid #2F54EB
                    box-shadow rem(0) rem(0) rem(5) rgba(0, 0, 0, 0.2)
                    padding rem(10) rem(15)
                    box-sizing border-box
                    margin rem(10)
                    line-height rem(24)
                    div
                        font-size rem(13)
                    h2, .dkjg
                        display flex
                        justify-content space-between
        [class*=van-hairline]::after
            border 0
        >>> .van-step__title
            color #333 !important
        >>> .van-step--vertical
            padding rem(5) rem(5) rem(5) 0
        .lines
            display flex
            align-items center
  

</style>